<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title></title>
    <style type="text/css">
        #map {
            width: 100%;
            position: fixed;
            top: 0px;
            bottom: 0px;
            line-height: 200px;
            text-align: center;
            background: #FFFFFF;
        }
    </style>
    <script type="text/javascript">
        // 方法
        // 扩展API加载完毕后调用onPlusReady回调函数
//        var dst = null;
//        var src = null;
//        document.addEventListener("plusready", onPlusReady, false);
//        // 扩展API加载完毕，现在可以正常调用扩展API
//        function onPlusReady() {
//            // 设置目标位置坐标点和其实位置坐标点
//            dst = new plus.maps.Point(116.39131928, 39.90793074); // 天安门
//            src = new plus.maps.Point(116.335, 39.966); // 大钟寺
//            // ---------调用系统地图显示------------
//        }
//        function getMap() {
//            plus.maps.openSysMap(dst, "天安门", src);
//        }


        // 创建地图组件
        function buildMap() {

        }

        var em = null, map = null;
        // H5 plus事件处理
        function plusReady() {
            // 确保DOM解析完成
            if (!em || !window.plus || map) {
                return
            };
            map = new plus.maps.Map("map");
        }

        if (window.plus) {
            plusReady();
        } else {
            document.addEventListener("plusready", plusReady, false);
        }
        // DOMContentloaded事件处理
        document.addEventListener("DOMContentLoaded", function () {
            em = document.getElementById("map");
            plusReady();
        }, false);
    </script>
</head>
<body>
<div>
    <h3 onclick="getMap()">调取第三方地图</h3>
    <div>
        <h3>创建地图</h3>
        <p onclick="buildMap()">创建地图组件</p>
    </div>
    <div id="map">地图加载中...</div>
</div>
</body>
</html>